<template>
  <div class="container" v-if="express_packages">
    <div v-for="(pitem, index) in express_packages" :key="index">
      <van-cell title="我的包裹" :value="pitem.express_com +' '+pitem.express_no"/>
      <div v-for="(o, i) in pitem.detail" :key="i">
        <van-card :title="o.product_title" :desc="o.sku_name" :num="o.amount" :price="o.price" :thumb="o.product_image + '?imageView2/1/w/120/h/120/q/75'" :key="index" />
      </div>
      <div class="tracking" v-if="pitem.tracking">
        <div class="status">状态：
          <van-tag type="primary" plain>{{pitem.tracking_more_status}}</van-tag>
        </div>
        <van-steps
          v-if="pitem.tracking.trackinfo"
          :steps="pitem.tracking.trackinfo" 
          direction="vertical"
          :active="0"
          active-color="#f60"
        />
      </div>
    </div>
    <div v-show="express_packages.length === 0" class="no-tracking">暂时没有查到物流信息...</div>
    <van-toast id="van-toast"/>
  </div>
</template>

<script>
import * as Utils from '@/utils'
import * as ExpressPackage from '@/api/express-package'
import Toast from 'vant-weapp/dist/toast/toast'

export default {
  data () {
    return {
      express_packages: null
    }
  },
  methods: {
    fetchExpressPackages () {
      ExpressPackage.list({ order_id: this.$root.$mp.query.id })
        .then(data => {
          this.express_packages = data.map(item => {
            item.tracking_more_status = Utils.default.transExpressTrackStatus(item.tracking_more_status)
            if (item.tracking) {
              item.tracking.trackinfo.forEach(val => {
                val.text = val.StatusDescription
                val.desc = val.Date
                return val
              })
            }
            return item
          })
          wx.hideNavigationBarLoading()
        })
        .catch(err => Toast(err.msg))
    },
    transExpressTrackStatus (status) {
      return Utils.default.transExpressTrackStatus(status)
    }
  },
  onPullDownRefresh () {
    wx.showNavigationBarLoading()
    this.fetchExpressPackages()
    wx.stopPullDownRefresh()
  },
  onLoad () {
    wx.showNavigationBarLoading()
    this.fetchExpressPackages()
  }
}
</script>

<style lang="less" scoped>
.container {
  position:relative;
  padding-bottom:80px;
}

.tracking {
  background: #fff;
  .status {
    padding: 15px;
  }
}

.no-tracking {
  background: #fff;
  padding: 15px;
  color: #999;
}
</style>
